<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button type="primary" @click="dialogFormVisible = true">角色添加</el-button>
    <el-button type="primary" @click="showTreeDialog">角色授权</el-button>
    <!--    数据表格-->
    <el-table
              ref="roleTable"
              :data="tableData"
              @current-change="changeCurrent"
              @select-all="selectAll"
              style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="编号"
        >
            <template slot-scope="scope">
                <span >{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="名称"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.roleName }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="描述"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.roleDescribe }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="创建时间"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.roleCreateDate }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="更新时间"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.roleUpdateDate }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="创建用户名"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.roleCreateName }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="更新用户名"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.roleUpdateName }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="roleEdit(scope.$index,scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="roleDelete(scope.$index,scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            small
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    <el-dialog title="角色授权" :visible.sync="dialogTreeVisible">
        <el-tree
                :data="functions"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                @check="setFunctions"
                >
        </el-tree>
    </el-dialog>
    <el-dialog title="角色管理" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="role">
            <el-form-item label="角色名" :label-width="formLabelWidth">
                <el-input v-model="role.roleName"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" :label-width="formLabelWidth">
                <el-input v-model="role.roleDescribe" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveRole()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                tableData:null,
                total:0,//总条数
                current:1,//当前条数
                pageSize:10,//每页条数
                line:null,
                dialogTreeVisible:false,
                dialogFormVisible:false,
                functions:null,
                defaultProps:{
                    children:'subMenus',
                    label:'menuName'
                },
                role:{
                    id:'',
                    roleName:'',
                    roleDescribe:''
                },
                formLabelWidth:"120px"
            }
        },methods: {
            loadPage(current)
            {
                this.current = current;
                axios.get("/roles/" + current).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.pageSize;
                    }
                });
            },
            closeMyDialog(){
                this.role={   //关闭对话框时更改product属性
                    id:'',
                    name:'',
                    description:'',
                }
            },
            //获取点击到数据并在数据库添加
            setFunctions(arg1,arg2){
                if(arg2.checkedKeys.indexOf(arg1.id)!=-1){
                    axios.post("/role-functions"
                        ,{roleId:this.line.id,menuId:arg1.id})
                        .then(value => {
                            if (value.data.code==1){
                                this.$message(value.data.msg);
                            }
                        });
                }else {
                    axios.delete("/role-functions/"+this.line.id+"/"+arg1.id)
                        .then(value => {
                            if (value.data.code==1){
                                this.$message(value.data.msg);
                            }
                        });
                }
                this.dialogFormVisible=false;
            },
            //列表点击一行
            changeCurrent(row){
                        this.line=JSON.parse(JSON.stringify(row));
                        this.$refs.roleTable.clearSelection();
                        this.$refs.roleTable.toggleRowSelection(row);
            },
            //选择所有的操作
            selectAll(){
                this.$refs.roleTable.clearSelection();
            },
            //展示所有的权限
            showTreeDialog(){
                if(this.line){
                    //将dataid传给rolecontroller为他寻找所有的需要选中的对象,传过来的是一个数组可以直接使用
                    axios.get("/functions/roles/"+this.line.id).then(value => {
                        if(value.data.code == 1){
                        this.$refs.tree.setCheckedKeys(value.data.data);
                        }
                    });
                    this.dialogTreeVisible = true;
                }else{
                    this.$message("没有选择任意角色");
                }
            },
            roleEdit(index,row){
                //使用JSON.parse和JSON.stringify可以将数据以JSON形式赋给当前对象
                this.role=JSON.parse(JSON.stringify(row))
                this.dialogFormVisible=true;
            },
            roleDelete(index,row){
                if (confirm("确定删除吗")){
                    axios.delete("/roles/"+row.id).then(value => {
                       if (value.data.code==1){
                           this.loadPage(this.current);
                            this.$message(value.data.msg);
                       }
                    });
                }
            },
            saveRole(){
                if(this.role.id==''){
                    axios.post("/roles",this.role).then(value => {
                        if(value.data.code == 1){
                            this.loadPage(this.current);
                            this.$message(value.data.msg);
                        }
                    });
                }else{
                    axios.put("/roles",this.role).then(value => {
                       if(value.data.code==1){
                           this.loadPage(this.current)
                           this.$message(value.data.msg);
                       }
                    });
                }
                this.dialogFormVisible=false;
            }
        },
        mounted(){
                axios.get("/functions").then(value => {
                    if(value.data.code == 1){
                        this.functions = value.data.data;
                    }
            });
            this.loadPage(1);
        }
    })
</script>
</html>